import React from 'react';
import ReactDOM from 'react-dom';

// React 组件定义 数据（状态）
class Timer extends React.Component {
  // 组件状态的定义
  state = {
    time: new Date().toISOString(),
  };

  constructor() {
    super();

    // 绑定this
    // this.handleTimeChange = this.handleTimeChange.bind(this);
  }

  // handleTimeChange() {
  //   console.log('this', this);
  //   this.setState({ time: new Date().toISOString() });
  // }

  handleTimeChange = () => {
    this.setState({ time: new Date().toISOString() });
  };

  render() {
    return (
      <div>
        <h1>{this.state.time}</h1>
        <button onClick={this.handleTimeChange}>获取最新时间</button>
      </div>
    );
  }
}

// React 组件的使用规则
ReactDOM.render(<Timer />, document.getElementById('root'));
